<template>
  <HeadContainer class="mine-settings-blocked-accounts" :title="$t('title.blockAcc')" @back="back">
    <div v-for="(block, index) in blocks" :key="block.aff_blocked">
      <div class="d-flex justify-space-between align-center">
        <div class="d-flex gap-row-8 align-center my-4">
          <Avatar :src="block.avatar" :radius="25" class="me-5" :vip="block.is_vip" :vipTier="block.tier"></Avatar>
          <div class="font-size-14 font-weight-500">{{ block.username }}</div>
        </div>
        <div class="d-flex align-center">
          <div @click="cancelBlock(index)" class="primary-btn w-100 d-flex justify-center align-center">
            {{ $t('common.cancelBlock') }}
          </div>
        </div>
      </div>
      <v-divider></v-divider>
    </div>
    <div v-if="!loading && blocks.length === 0" class="d-flex justify-center align-center h-100">
      <ErrorNodata></ErrorNodata>
    </div>
    <div v-else>
      <v-container v-intersect="nextPage" class="text-center">
        <div v-if="loading" class="loading font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.loading') }}
        </div>
        <div v-if="noMore" class="no-more font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.noMore') }}
        </div>
      </v-container>
    </div>
  </HeadContainer>
</template>

<script setup>
import { onUnmounted } from 'vue'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import { TYPES, notifyBlock, on } from '@/utils/state-broadcast'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import Avatar from '@/components/multimedia/Avatar.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { BLOCK_UPDATE } from '@/constant'
import API from '@/http'

const { $confirm } = usePopupDialogStore()
const emits = defineEmits(['toPage'])

function back() {
  emits('toPage', 2, 'settings')
}

const {
  dataList: blocks,
  loading,
  noMore,
  errorMsg,
  init,
  refresh,
  nextPage,
} = useInfinite({ request: API.Block.list })

init()

const cancelBlock = async (index) => {
  console.log('按下確認後aff_blocked', blocks.value[index].aff_blocked)
  try {
    const confirmOptions = {
      title: $t('title.blockAcc'),
      content: `${blocks.value[index].username}` + $t('content.cancelBlock'),
      confirm: async () => {
        try {
          const data = {
            aff_blocked: blocks.value[index].aff_blocked,
            type: BLOCK_UPDATE.CANCEL_BLOCK,
          }
          await API.Block.update({ data })
          blocks.value.splice(index, 1)
          notifyBlock(data.aff_blocked, false)
        } catch (e) {
          console.log(e)
        }
      },
      cancel: () => {
        console.log('按下取消')
      },
      fromCenter: true,
    }
    $confirm(confirmOptions).open()
  } catch (e) {
    console.log(e)
  }
}

const cancelBlockObserve = on(TYPES.BLOCK, () => {
  refresh()
})
onUnmounted(cancelBlockObserve)
</script>
